//载入基础页面
{extend name="common/base" /}

//页面单独CSS
{block name="CustomCSS"}
<link rel="stylesheet" href="__STATIC__/vendors/css/datatables/datatables.min.css">

{/block}

//页面单独JS
{block name="CustomJS"}
<script src="__STATIC__/vendors/js/datatables/datatables.min.js"></script>
<script src="__STATIC__/vendors/js/noty/noty.min.js"></script>
<script type="text/javascript">

    //获取配置信息，如传入值，则赋值
    function getConfig(config){
        //组装URL
        var url = "{:url('Stock/stockQueyConfigJson')}?vehicle="+$("#vehicle").val();
        //使用replace方法把url里面的+号给替换掉
        url = url.replace(/\+/g, '%2B');
        //请求数据
        $.ajax({
            //请求方式
            type : "GET",
            //请求的媒体类型
            contentType: "application/json;charset=UTF-8",
            //请求地址
            url : url,
            //请求成功
            success : function(config_data) {
                // var config_data = $.parseJSON(result);
                //删除市的原有option
                $('#config').empty();
                $('<option></option>').appendTo('#config');
                //添加option
                $.each(config_data, function(index,item) {
                    $('<option value="' + item + '">' + item + '</option>').appendTo('#config');
                });
                $('#color').empty();
                $('#trim').empty();
            },
            //请求失败，包含具体的错误信息
            error : function(e){
                console.log(e.status);
                console.log(e.responseText);
            }
        });
    }

    //获取颜色信息
    function getColor(){
        //组装URL
        var url = "{:url('Stock/stockQueyColorJson')}?vehicle="+$("#vehicle").val()+"&config="+$("#config").val();
        //使用replace方法把url里面的+号给替换掉
        url = url.replace(/\+/g, '%2B');
        //请求数据
        $.ajax({
            //请求方式
            type : "GET",
            //请求的媒体类型
            contentType: "application/json;charset=UTF-8",
            //请求地址
            url : url,
            //请求成功
            success : function(info_data) {
                // var info_data = $.parseJSON(result);
                //删除市的原有option，给color赋值
                $('#color').empty();
                $('<option></option>').appendTo('#color');
                //添加option
                $.each(info_data, function(index,item) {
                    $('<option value="' + item + '">' + item + '</option>').appendTo('#color');
                });
                //删除内饰的原有option
                $('#trim').empty();
            },
            //请求失败，包含具体的错误信息
            error : function(e){
                alert('数据有误，请联系管理员');
                console.log(e.status);
                console.log(e.responseText);
            }
        });
    }

    //获取颜色信息
    function getTrim(){
        //组装URL
        var url = "{:url('Stock/stockQueyTrimJson')}?vehicle="+$("#vehicle").val()+"&config="+$("#config").val()+"&color="+$("#color").val();
        //使用replace方法把url里面的+号给替换掉
        url = url.replace(/\+/g, '%2B');
        //请求数据
        $.ajax({
            //请求方式
            type : "GET",
            //请求的媒体类型
            contentType: "application/json;charset=UTF-8",
            //请求地址
            url : url,
            //请求成功
            success : function(info_data) {
                // var info_data = $.parseJSON(result);
                //删除市的原有option，给color赋值
                $('#trim').empty();
                $('<option></option>').appendTo('#trim');
                //添加option
                $.each(info_data, function(index,item) {
                    $('<option value="' + item + '">' + item + '</option>').appendTo('#trim');
                });
            },
            //请求失败，包含具体的错误信息
            error : function(e){
                alert('数据有误，请联系管理员');
                console.log(e.status);
                console.log(e.responseText);
            }
        });
    }


    function tableQuery(vehicle,config,color,trim){

    	var vehicle = $('#vehicle').val();
    	// 判断是否有值
    	if(vehicle != null){
    		var vehicleUrl = 'vehicle=' + vehicle;
    	}else{
    		var vehicleUrl = '';
    	}

    	var config = $('#config').val();
    	if(config != null){
    		var configUrl = 'config=' + config;
    	}else{
    		var configUrl = '';
    	}

    	var color = $('#color').val();
    	if(color != null){
    		var colorUrl = 'color=' + color;
    	}else{
    		var colorUrl = '';
    	}

    	var trim = $('#trim').val();
    	if(trim != null){
    		var trimUrl = 'trim=' + trim;
    	}else{
    		var trimUrl = '';
    	}

    	var url = "{:url('Stock/queryJson')}?" + vehicleUrl + configUrl + colorUrl + trimUrl; //请求数据的后台地址
    	table.ajax.url(url).load();
    }

    $(document).ready(function () {
    	//定义表格
        var table = $('#table').DataTable({
        	ajax: {
	            "url": "{:url('Stock/queryJson')}", //请求数据的后台地址
	            "type": "get",     // ajax的请求方法
            },
            paging: true,
            searching:false, 
            language: {
                "url": "__STATIC__/vendors/js/datatables/cn.json"
            },
            stateSave: true, 
            order: [[ 1, 'desc' ]],
            columns: [
                {"data": "create_date"},
                {"data": "age"},
                {"data": "vehicle"},
                {"data": "config"},
                {"data": "color"},
                {"data": "trim"},
                {"data": "vin"},
                {"data": "location"},
                {"data": "option"},
                {"data": "note"}
            ],
            columnDefs: [
                { "orderable": false, "targets": [2,4,5,6,7,8,9]}//禁止排序
            ]
        });

        function tableQuery(vehicle,config,color,trim){

	    	var vehicle = $('#vehicle').val();
	    	// 判断是否有值
	    	if(vehicle != null){
	    		var vehicleUrl = '&vehicle=' + vehicle;
	    	}else{
	    		var vehicleUrl = '';
	    	}

	    	var config = $('#config').val();
	    	if(config != null){
	    		var configUrl = '&config=' + config;
	    	}else{
	    		var configUrl = '';
	    	}

	    	var color = $('#color').val();
	    	if(color != null){
	    		var colorUrl = '&color=' + color;
	    	}else{
	    		var colorUrl = '';
	    	}

	    	var trim = $('#trim').val();
	    	if(trim != null){
	    		var trimUrl = '&trim=' + trim;
	    	}else{
	    		var trimUrl = '';
	    	}

	    	var url = "{:url('Stock/queryJson')}?" + vehicleUrl + configUrl + colorUrl + trimUrl; //请求数据的后台地址
	    	table.ajax.url(url).load();
	    }


    	//如果车系有变化，拉取配置信息
        $("#vehicle").change(function(){
            $('#config').empty();
            $('#color').empty();
            $('#trim').empty();
            getConfig();
            tableQuery();
        });

        //如果车系有变化，拉取配置信息
        $("#config").change(function(){
            $('#color').empty();
            $('#trim').empty();
            getColor();
            tableQuery();
        });

        //如果车系有变化，拉取配置信息
        $("#color").change(function(){
            $('#trim').empty();
            getTrim();
            tableQuery();
        });

        //如果车系有变化，拉取配置信息
        $("#trim").change(function(){
            tableQuery();
        });
    });
</script>
{/block}

//页面名称
{block name="PageName"}
库存查询
{/block}

//自定义Modal
{block name="Modal"}
{/block}

//主页面
{block name="main"}
<div class="row flex-row">
	<div class="col-xl-12 col-sm-12">
		<div class="widget has-shadow">
            <div class="widget-header bordered no-actions d-flex align-items-center">
                <h4>查询库存条件</h4>
            </div>
            <div class="widget-body">
                <div class="form-group row">
                	<div class="col-xl-3 col-sm-12">
	                    <div class="input-group">
	                        <span class="input-group-addon addon-primary">车系*</span>
	                        <select class="form-control" name="vehicle" id="vehicle">
	                            <option></option>
	                            {volist name="vehicleOption" id="vehicleOption"}
	                                <option value="{$vehicleOption}">{$vehicleOption}</option>
	                            {/volist}
	                        </select>
	                    </div>
	                </div>
	                <div class="col-xl-3 col-sm-12">
	                	<div class="input-group">
                        <span class="input-group-addon addon-primary">配置*</span>
                        <select class="form-control" name="config" id="config">
                        </select>
                        <div class="invalid-feedback">
                            请选择配置
                        </div>
                    </div>
	                </div>
	                <div class="col-xl-3 col-sm-12">
	                	<div class="input-group">
	                        <span class="input-group-addon addon-primary">颜色*</span>
	                        <select class="form-control" name="color" id="color">
	                        </select>
	                         <div class="invalid-feedback">
	                            请选择颜色
	                        </div>
	                    </div>
	                </div>
	                <div class="col-xl-3 col-sm-12">
	                	<div class="input-group">
	                        <span class="input-group-addon addon-primary">内饰*</span>
	                        <select class="form-control" name="trim" id="trim">
	                        </select>
	                        <div class="invalid-feedback">
	                            请选择内饰
	                        </div>
	                    </div>
	                </div>
                </div>
            </div>
        </div>
	</div>
</div>
<div class="row flex-row">
	<div class="col-xl-12 col-sm-12">
    	<div class="widget has-shadow">
        	<div class="widget-header bordered no-actions d-flex align-items-center">
                <h2>车辆库存列表</h2>
            </div>
            <div class="widget-body">
                <div class="table-responsive">
                    <table id="table" class="table mb-0">
                        <thead>
                            <tr>
                                <th>到库时间</th>
                                <th>天数</th>
                                <th>车系</th>
                                <th>配置</th>
                                <th>颜色</th>
                                <th>内饰</th>
                                <th>车架号</th>
                                <th>存放地点</th>
                                <th>选装</th>
                                <th>备注</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}

